import React, { useState } from 'react'
import { TabBar } from 'antd-mobile'
import {
  Route,
  Switch,
  useHistory,
  useLocation,
  MemoryRouter as Router,
  useParams,
  useNavigate,
} from 'react-router-dom'
import {
  AppOutline,
  ContentOutline,
  UserOutline,
} from 'antd-mobile-icons'


function LayoutFooter() {
  const tabs = [
    {
      key: '/',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/news',
      title: '新闻',
      icon: <ContentOutline />,
    },
    {
      key: '/user',
      title: '我的',
      icon: <UserOutline />,
    },
  ]

  const [activeKey, setActiveKey] = useState('/')

  const navigate = useNavigate();
  let location = useLocation();

  React.useEffect(() => {
    setActiveKey(location.pathname)
  }, [location])

  return (
    <TabBar
      style={{
        position: 'fixed',
        width: '100%',
        bottom: 0,
        backgroundColor: 'white'
      }}
      activeKey={activeKey}
      defaultActiveKey="/"
      onChange={value => {
        navigate(value)
        setActiveKey(value)
      }}
      safeArea={false}
    >
      {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  )
}

export default LayoutFooter